<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>



    <link rel="stylesheet" href="../public/bootstrap-fileinput/css/fileinput.css">

    <script src="../public/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../public/bootstrap-fileinput/js/locales/zh.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="container" id="uploadApp" style="margin: 50px auto;">


        <div class="alert alert-info">
            <button type="button" @click="fnShowUploadModal" class="btn btn-primary">upload</button>

        </div>



        <div class="row">

            <!-- <div v-for="(item, index) in fileList" :key="index" class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                
                <img :src="'../'+item" class="img-responsive" alt="Image">
                <p>{{item}}</p>
            </div> -->

            
            <div class="col-sm-3" v-for="(item, index) in fileList" :key="index">
                
                    <div class="thumbnail" >
                            <img  :src="item | imageUrl" alt="item" :title="item" @click="fnShowFile(item)" style="height:150px;width:200px;display:block;">
                            <div class="caption">
                                <!-- <h3>缩略图标签</h3> -->
                                <p>{{item | fmtTxt}}</p>
                                <p>
                                    
                                </p>
                            </div>
                         </div>
            </div>
            
            


        </div>



        <!-- add form  -->

        <form>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">上传文件</h4>
                        </div>
                        <div class="modal-body">
                            <input type="file" name="uploadFile" id="fileUpload" multiple class="file-loading" />
                        </div>
                    </div>
                </div>
            </div>
        </form>





    </div>






</body>

</html>

<script>
    var vm = new Vue({
        el: '#uploadApp',
        data() {
            return {

                // deleteId: '',
                // noteCate: {},
                fileList: []
            }
        },
        filters: {

            fmtTxt(txt) {

                if (!txt) {
                    return "";
                }

                return txt.substr(0, 20);
            },
            imageUrl(item) {

                var _src = "";

                if (!item) {
                    return _src;
                }

                var index = item.lastIndexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
                var suffix = item.substring(index).toLowerCase(); //截断"."之前的，得到后缀
                if (suffix != ".bmp" && suffix != ".png" && suffix != ".gif" && suffix != ".jpg" && suffix != ".jpeg") {

                    //根据后缀，判断是否符合图片格式
                    return _src;
                }

                return '../' + item;
            }
        },
        methods: {

            fnShowUploadModal() {

                $('#myModal').modal('show');
            },
            // fnAddRow() {

            //     this.keywordArr.push({});

            // },
            // fnRemoveRow(indx) {

            //     this.keywordArr.splice(indx, 1);

            // },

            fnDeleteModal(item) {

                this.deleteId = item._id;
                $('#deleteConfirmModal').modal('show');
            },


            fnDelete() {

                $('#deleteConfirmModal').modal('hide');
                var _self = this;

                var deleteUrl = '../notes/cates/delete';
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: deleteUrl,
                    data: {
                        _id: _self.deleteId
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 0) {
                            _self.query();
                        }

                    }
                });

            },

            query() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../files/fileinput",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 0) {

                            _self.fileList = response.dat;
                            // console.log(response);
                        }

                    }
                });
            },

            initUpload() {
                var _self = this;
                $('#fileUpload').fileinput({
                    // language: 'zh', //设置语言
                    // uploadUrl: "/FileUpload/Upload", //上传的地址
                    // allowedFileExtensions: ['jpg', 'png', 'gif'],//接收的文件后缀,
                    // maxFileCount: 100,
                    // enctype: 'multipart/form-data',
                    // showUpload: true, //是否显示上传按钮
                    // showCaption: false,//是否显示标题
                    // browseClass: "btn btn-primary", //按钮样式 
                    // previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    // msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",


                    // showUpload: true,
                    enctype: 'multipart/form-data',
                    language: 'zh',
                    uploadAsync: true,
                    // dropZoneEnabled: false,
                    uploadUrl: '../files/fileinput',
                    maxFileCount: 10,
                    // maxImageWidth: 600,
                    // resizeImage: false,
                    // showCaption: false,
                    // showPreview: false,
                    browseClass: "btn btn-primary btn-lg",
                    // allowedFileExtensions: ['csv', 'txt'],
                    previewFileIcon: ""
                }).on("filebatchselected", function (event, files) {

                    $(this).fileinput("upload");
                }).on("fileuploaded", function (event, data) {

                    // console.log(data);
                    _self.query();
                    if (data.response) {
                        // alert('处理成功');

                    }
                });
            },
            fnShowFile(fileName) {
                window.open('../' + fileName);
            }
        },
        mounted() {

            this.query();

            this.initUpload();
        }
    })
</script>